@mixin ama-process-modeler($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);

    .canvas-editor {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .bpmn-properties {
        width: 276px;
        overflow: auto;
        flex: 1 0 auto;
        border-left: 1px solid mat-color($foreground, text, 0.07);
        background-color: mat-color($foreground, text, 0.02);
    }

    .process-palette {
        position: absolute;
        top: 8px;
        left: 8px;
        display: block;
        width: auto;
        z-index: 2;
        height: calc(100% - 8px);
    }

    .bpmn-controls {
        width: auto;
        position: absolute;
        right: 1px;
        z-index: 2;
        background: mat-color($background, raised-button);
        box-shadow: 0 1px 4px mat-color($foreground, slider-off);
        border-radius: 2px;
        list-style: none;
        padding: 5px 5px 0 5px;
        margin: 0;

        &.bpmn-fit-to-view {
            top: 8px;
        }

        &.bpmn-actions-controls {
            top: 55px;
        }

        &.bpmn-zoom-controls {
            bottom: 85px;
        }

        hr {
            border: none;
            border-top: solid 1px mat-color($foreground, slider-off);
            margin: 0 0 5px 0;
        }

        button {
            padding: 0;
            margin: 0;
            line-height: 0;
            outline: none;
            cursor: pointer;
            color: mat-color($foreground, secondary-text);
            background: none;
            border: none;
        }
    }
}
